<template>
	<el-dialog title="账号信息" v-model="isShowDialog" width="450px" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-row :gutter="35">
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				编号
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.Number}}
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				账号名
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.AccountName}}
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				头像
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				<el-image :src="ruleForm.Avatar+'?t='+Math.random()" lazy style="width:200px">
				</el-image>
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				姓名
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.Name}}
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				手机
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.MobileTelephone}}
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				Email
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.Email}}
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				QQ
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.QQ}}
			</el-col>
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" style="text-align: right;">
				微信
			</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
				{{ruleForm.Wechat}}
			</el-col>
		</el-row>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" >关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		onMounted,
		ref,
	} from 'vue';
	export default {
		name: 'UserForm',
		setup() {
			const PICURL =
				import.meta.env.VITE_PIC_URL as any
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					id: '0',
					accountName: '',
					name: '',
					mobileTelephone: '',
					email: '',
					qq: '',
					wechat: '',
				},

			});
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {
				state.ruleForm = model;
				state.isShowDialog = true;
				state.callback = callback;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};

			// 页面加载时
			onMounted(() => {

			});

			return {
				openDialog,
				closeDialog,
				onCancel,
				PICURL,
				...toRefs(state),
			};
		},
	};
</script>
